<template>
  <div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <el-date-picker
          v-model="startTime"
          type="date"
          placeholder="选择查询的起始时间"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
          style="margin-right: 5px">
      </el-date-picker>
      <el-date-picker
          v-model="endTime"
          type="date"
          placeholder="选择查询的结束时间"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
          style="margin-right: 5px">
      </el-date-picker>
      <el-input
          v-model="warehouseId"
          size="default"
          placeholder="想要查询的库房编号"
          style="width: 200px"
      />
      <el-input
          v-model="entryOrderId"
          size="default"
          placeholder="想要查询的入库单编号"
          style="width: 200px"
      />
      <el-button type="primary" style="margin-left: 10px" @click = "search">查询</el-button>
    </div>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style=" width: 100%"
          height="542px"
      >
        <el-table-column type="index" :index="getIndex" width="100px" label="序号"/>
        <el-table-column prop="entryOrderId" width="100px" label="入库单号"/>
        <el-table-column prop="warehouseId" width="150px" label="入库库房编号"/>
        <el-table-column prop="code" label="包含的商品代码"/>
        <el-table-column prop="num" label="对应的商品数量"/>
        <el-table-column prop="inTime" label="入库时间"/>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>
    </el-scrollbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EntryOrder",
  data(){
    return{
      startTime:null,//查找的开始时间
      endTime:null,//查找的结束时间
      code:'',//要查找的商品代码
      warehouseId:'',//要查找的库房编号
      entryOrderId:'',//要查找的入库单编号
      tableData:[
      ],
      pageSize:10,
      pageNow:0,
      totalSize:''
    }
  },
  methods:{
    // 加载表单数据
    loadPost(){
      axios.post("http://localhost:1050/entryOrder/showAllEntryOrder",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        this.pageNow = 1
        res = res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    // 根据选择框和输入框的属性查找对应的入库单
    search(){
      axios.post("http://localhost:1050/entryOrder/queryEntryOrder",{
        startTime:this.startTime,
        endTime:this.endTime,
        warehouseId:this.warehouseId,
        entryOrderId:this.entryOrderId,
        pageSize:this.pageSize,
        pageNow:this.pageNow - 1
      }).then(res=>{
        res = res.data
        if (res.code == '200') {
          console.log(res.data)
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    //翻到下一页
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow,this.startTime,this.code)
      axios.post("http://localhost:1050/entryOrder/queryEntryOrder",{
        code:this.code,
        startTime:this.startTime,
        endTime:this.endTime,
        warehouseId:this.warehouseId,
        entryOrderId:this.entryOrderId,
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res = res.data
        if (res.code == '200') {
          console.log(res.data)
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    // 自动得到index
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
  },

  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>

</style>